﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>WEB打印控件LODOP的样例二:打印当前页面的内容</title>

    <script language="javascript" src="LodopFuncs.js"></script>
</head>
<body>
<h2><font color="#009999">演示如何打印当前页面的内容：</font>
</h2>
<form id="form1">
    <table border="1" width="300" id="tb01" bgcolor="#CCFFCC" style="border:solid 1px black;border-collapse:collapse">
        <tr>
            <td width="133" id="mtb001">
                <font face="黑体" color="#FF0000" size="3"><u>&nbsp;《表单一》&nbsp;</u></font></td>
        </tr>
    </table>
    <table border="1" width="300" height="106" cellspacing="0" bgcolor="#CCFFFF"
           style="border-collapse:collapse;table-layout:fixed;border:solid 1px black;">
        <tr>
            <td width="66" height="16" style="border:solid 1px black"><font color="#0000FF">A</font><font
                    color="#0000FF">等</font></td>
            <td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">B</font><font
                    color="#0000FF">等</font></td>
            <td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">C</font><font
                    color="#0000FF">等</font></td>
        </tr>
        <tr>
            <td width="66" height="16" style="border:solid 1px black">A<sub>01</sub></td>
            <td width="80" height="12" style="border:solid 1px black">中-001</td>
            <td width="51" height="12" style="border:solid 1px black">C1<sup>x</sup></td>
        </tr>
        <tr>
            <td width="66" height="16" style="border:solid 1px black">A<sub>02</sub>Φ</td>
            <td width="80" height="16" style="border:solid 1px black">日-スの</td>
            <td width="51" height="16" style="border:solid 1px black"><font face='Vernada'>7&#13221</font></td>
        </tr>
        <tr>
            <td width="66" height="16" style="border:solid 1px black;overflow:hidden">A<sub>03</sub>
                <nobr>over隐藏后面的：1234567890</nobr>
            </td>
            <td width="80" height="16" style="border:solid 1px black;overflow:hidden">韩-안녕</td>
            <td width="51" height="16">C3<sup>x</sup>
            </td>
        </tr>
    </table>
</form>
<br>
<div id="form2">
    <table border="1" width="100%" id="tb01" bgcolor="#CCFFCC" style="border:solid 1px black;border-collapse:collapse">
        <tr>
            <td width="133" id="mtb001">
                <font face="黑体" color="#FF0000" size="3">《表单二》&copy;</font></td>
        </tr>
    </table>
    <table border="1" width="100%" height="106" cellspacing="0" bgcolor="#CCFFFF"
           style="border:solid 1px black;border-collapse:collapse">
        <tr>
            <td width="66" height="16" style="border:solid 1px black"><font color="#0000FF">X</font><font
                    color="#0000FF">等</font></td>
            <td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">Y等</font></td>
            <td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">Z等</font></td>
        </tr>
        <tr>
            <td width="66" height="12" style="border:solid 1px black"><span
                    style="font-family:Wingdings;font-size:25px;">&#254;</span>X001
            </td>
            <td width="51" height="12" style="border:solid 1px black"><strike>Y001</strike></td>
            <td width="51" height="44" rowspan="3" style="border:solid 1px black">
                <ol style="list-style-type:upper-alpha;list-style-position:inside;">
                    <li>Z001</li>
                    <li>Z002</li>
                    <li>Z003</li>
                    <li>Z004</li>
                    <li>Z005</li>
                </ol>
            </td>
        </tr>
        <tr>
            <td width="30%" height="16" style="border:solid 1px black"><strong>X002</strong></td>
            <td width="51" height="16" style="border:solid 1px black"><u>Y002</u><span style="visibility: hidden">hidesome</span>
            </td>
        </tr>
        <tr>
            <td width="30%" height="16" style="border:solid 1px black"><span
                    style="text-decoration: overline">X003</span>
            </td>
            <td width="40%" height="16" style="border:solid 1px black"><em>Y003</em><input type="radio" name="R1"><input
                    type="radio" name="R1" checked></td>
        </tr>
    </table>
</div>
<p>1：若只打印《表单一》,看一下<a href="javascript:prn1_preview()">打印预览</a>,可<a href="javascript:prn1_print()">直接打印</a>也可
    <a href="javascript:prn1_printA()">选择打印机</a>打印。<br><br>
    2：若《表单一》和《表单二》一起并列输出,看一下<a href="javascript:prn2_preview()">打印预览</a>,其布局风格可<a
            href="javascript:prn2_manage()">打印维护</a>调整。
<p>3：若打印整个页面,看看<a href="javascript:prn3_preview()">打印预览</a>。<br><br>
    本例要点是用Document的innerHTML方法把打印目标的超文本送给控件。
<p><a href="PrintSampIndex.html">&lt;&lt;回样例目录</a>
</p>
<script language="javascript" type="text/javascript">
    var LODOP; //声明为全局变量
    function prn1_preview() {
        CreateOneFormPage();
        LODOP.PREVIEW();
    };
    function prn1_print() {
        CreateOneFormPage();
        LODOP.PRINT();
    };
    function prn1_printA() {
        CreateOneFormPage();
        LODOP.PRINTA();
    };
    function CreateOneFormPage() {
        LODOP = getLodop();
        LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_表单一");
        LODOP.SET_PRINT_STYLE("FontSize", 18);
        LODOP.SET_PRINT_STYLE("Bold", 1);
        LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印页面部分内容");
        LODOP.ADD_PRINT_HTM(88, 200, 350, 600, document.getElementById("form1").innerHTML);
    };
    function prn2_preview() {
        CreateTwoFormPage();
        LODOP.PREVIEW();
    };
    function prn2_manage() {
        CreateTwoFormPage();
        LODOP.PRINT_SETUP();
    };
    function CreateTwoFormPage() {
        LODOP = getLodop();
        LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_表单二");
        LODOP.ADD_PRINT_RECT(70, 27, 634, 242, 0, 1);
        LODOP.ADD_PRINT_TEXT(29, 236, 279, 38, "页面内容改变布局打印");
        LODOP.SET_PRINT_STYLEA(2, "FontSize", 18);
        LODOP.SET_PRINT_STYLEA(2, "Bold", 1);
        LODOP.ADD_PRINT_HTM(88, 40, 321, 185, document.getElementById("form1").innerHTML);
        LODOP.ADD_PRINT_HTM(87, 355, 285, 187, document.getElementById("form2").innerHTML);
        LODOP.ADD_PRINT_TEXT(319, 58, 500, 30, "注：其中《表单一》按显示大小，《表单二》在程序控制宽度(285px)内自适应调整");
    };
    function prn3_preview() {
        LODOP = getLodop();
        LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_全页");
        LODOP.ADD_PRINT_HTM(0, 0, "100%", "100%", document.documentElement.innerHTML);
        LODOP.PREVIEW();
    };
</script>

</body>
</html>